<%--
  Created by IntelliJ IDEA.
  User: ThinkPad
  Date: 2021/12/7
  Time: 11:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>个人资料</title>
    <style>
        .dt1-right {
            line-height: 46px;
            display: inline-block;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/shopping-mall-index.css"/>
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/zhonglin.js"></script>

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
</head>

<body style="position:relative;">

<!--top 开始-->
<%@ include file="element/top.jsp" %>

<!--内容开始-->
<div class="personal w1200">
    <%@ include file="element/presonMiddleLeftList.jsp" %>
    <div class="personal-r f-r">
        <div class="personal-right">
            <div class="personal-r-tit">
                <h3>个人资料</h3>
            </div>

            <div class="data-con" id="person-data">
                <div class="dt1">
                    <p class="f-l">当前头像：</p>
                    <div class="touxiang f-l">
                        <div class="tu f-l">
                            <img src="${user.headImg}"/>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <div class="dt1">
                    <p class="dt-p f-l">昵称：</p>
                    <span class="dt1-right">${user.userName}</span>
                    <div style="clear:both;"></div>
                </div>
                <div class="dt1">
                    <p class="dt-p f-l">账号：</p>
                    <span class="dt1-right">${user.discount}</span>
                    <div style="clear:both;"></div>
                </div>
                <div class="dt1 dt3">
                    <p class="dt-p f-l">手机号：</p>
                    <span class="dt1-right">${user.phone}</span>
                    <div style="clear:both;"></div>
                </div>
                <div class="dt1">
                    <p class="dt-p f-l">地址：</p>
                    <span class="dt1-right">${user.address==null?'null':user.address}</span>
                    <div style="clear:both;"></div>
                </div>
                <button class="btn-pst" onclick="updateShow()">更改资料</button>
            </div>

            <div style="display: none" id="update-person-data" class="data-con layui-form">
                    <div class="dt1">
                        <p class="f-l">当前头像：</p>
                        <div class="touxiang f-l">
                            <div class="tu f-l">
                                <a href="#">
                                    <img id="headImg" src="${user.headImg}"/>
                                    <input type="file" name="" id="" class="img1"/>
                                </a>
                            </div>
                            <a href="JavaScript:;" class="sc f-l" shangchuang="">上传头像</a>
                            <div style="clear:both;"></div>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="dt1">
                        <p class="dt-p f-l">昵称：</p>
                        <input type="text" placeholder="昵称" id="username" value="${user.userName}"/>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="dt1">
                        <p class="dt-p f-l" style="float: left">地址：</p>
                        <div style="float: left;margin-top: 13px;">
                            <div data-toggle="distpicker">
                                <div class="form-group">
                                    <label class="sr-only" for="province1">Province</label>
                                    <select data-province="${user.address.split('-')[0]}" class="form-control" id="province1"></select>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="city1">City</label>
                                    <select data-city="${user.address.split('-')[1]}" class="form-control" id="city1"></select>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="district1">District</label>
                                    <select data-district="${user.address.split('-')[2]}" class="form-control" id="district1"></select>
                                </div>
                            </div>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <button class="btn-pst" onclick="saveInfo()">保存</button>
            </div>

            <script src="js/jquery.js"></script>
            <script type="text/javascript">
                $(function () {

                })

                function updateShow() {
                    $('#person-data').hide()
                    $('#update-person-data').show()
                }

                function saveInfo(){
                    $.ajax({
                        url:'/SheepShoppingMall/UserServlet',
                        data:{
                            opr:'updateUser',
                            username:$('#username').val(),
                            address:$('#province1').val()+'-'+$('#city1').val()+'-'+$('#district1').val(),
                            headImg:$('#headImg').attr('src'),
                            id:${user.id},
                            discount:'${user.discount}',
                            password:'${user.password}'
                        },
                        success:data=>{
                            if(data){
                                history.go(0)
                            }
                        }
                    })
                }
            </script>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>

<!--上传头像弹窗
<div class="tanchuang">
    <div class="t-c-bg"></div>
    <div class="t-c-con">
        <div class="tc-tit">
            <h3>上传头像</h3>
            <a href="JavaScript:;" delete=""><img src="images/t-c-del.gif" /></a>
            <div style="clear:both;"></div>
        </div>
        <div class="tc-con">
            <a href="#"><img src="images/tc-tu.gif" /></a>
            <button>保存头像</button>
        </div>
    </div>
</div>-->

<!--底部服务-->
<div class="ft-service">
    <div class="w1200">
        <div class="sv-con-l2 f-l">
            <dl>
                <dt><a href="#">新手上路</a></dt>
                <dd>
                    <a href="#">购物流程</a>
                    <a href="#">在线支付</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">配送方式</a></dt>
                <dd>
                    <a href="#">货到付款区域</a>
                    <a href="#">配送费标准</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd>
                    <a href="#">常见问题</a>
                    <a href="#">订购流程</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">售后服务</a></dt>
                <dd>
                    <a href="#">售后服务保障</a>
                    <a href="#">退款说明</a>
                    <a href="#">新手选购商品总则</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">关于我们</a></dt>
                <dd>
                    <a href="#">投诉与建议</a>
                </dd>
            </dl>
            <div style="clear:both;"></div>
        </div>
        <div class="sv-con-r2 f-r">
            <p class="sv-r-tle">187-8660-5539</p>
            <p>周一至周五9:00-17:30</p>
            <p>（仅收市话费）</p>
            <a href="#" class="zxkf">24小时在线客服</a>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

<!--底部 版权-->
<div class="footer w1200">
    <p>
        <a href="#">关于我们</a><span>|</span>
        <a href="#">友情链接</a><span>|</span>
        <a href="#">宅客微购社区</a><span>|</span>
        <a href="#">诚征英才</a><span>|</span>
        <a href="#">商家登录</a><span>|</span>
        <a href="#">供应商登录</a><span>|</span>
        <a href="#">热门搜索</a><span>|</span>
        <a href="#">宅客微购新品</a><span>|</span>
        <a href="#">开放平台</a>
    </p>
    <p>
        沪ICP备13044278号<span>|</span>合字B1.B2-20130004<span>|</span>营业执照<span>|</span>互联网药品信息服务资格证<span>|</span>互联网药品交易服务资格证
    </p>
</div>
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
<script src="js/main.js"></script>
</body>
</html>

